<template>
	<div class="calendar">
		<div class="year text-center ">
			<div class="iblock center a-c">
				<span class="yl-qian-left mr10" @click="addMonth(-1)"></span>
				<span>{{current.getFullYear()}}</span>
				年
				<span>{{current.getMonth()+1}}</span>
				月
				<span class="yl-qian-right ml10" @click="addMonth(1)"></span>
			</div>

		</div>
		<div class="week text-center flex">
			<div v-for="(item,index) in weeks" :key="index">{{item}}</div>
		</div>
		<div class="day">
			<div class="calendar-row flex" v-for="(item,index) in 6" :key="index">
				<div class="calendar-col" :class="{'active': days[(item-1) * 7 + (i-1)].curr,'on':  days[(item-1) * 7 + (i-1)].type,'not-current':days[(item-1) * 7 + (i-1)].notCurrent}" v-for="(i,index) in 7" :key="index">
					<i class="next" v-if="days[(item-1) * 7 + (i-1)].next" @click="tips"></i>
					<span>{{days[(item-1) * 7 + (i-1)].dateNum}}</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import api from "src/api/index";
export default {
	props: ['obj'],
	data() {
		return {
			current: new Date(),
			days: [],
			onlineData: {},
			weeks: ['日', '一', '二', '三', '四', '五', '六'],
			mytime: ''
		}
	},
	created() {
		this.onlineData = this.obj
		this.initDay();
		this.mergeData()
	},
	watch: {
		current() {
			this.initDay();
		}
	},
	methods: {
		tips() {
			this.$emit('tips')
		},
		toTime(str) {
			return new Date(str)
		},
		byTwo(n) {
			n = n.toString()
			return n[1] ? n : '0' + n
		},
		initDay() {
			let arr = [];
			let time = this.current;
			// 上个月
			time.setMonth(time.getMonth(), 1);
			let firstday = time.getDay();
			firstday === 0 && (firstday = 7);
			time.setDate(0);
			const before = time.getDate();
			for (let i = firstday; i > 0; i--) {
				arr.push({
					dateNum: before - i + 1,
					notCurrent: true,
					type: false,
					time: new Date(time.getFullYear(), time.getMonth(), before - i + 1).toLocaleDateString(),
					day: new Date(time.getFullYear(), time.getMonth(), before - i + 1).getDay(),
				})
			};
			// 当月
			time.setMonth(time.getMonth() + 2, 0);
			const realdays = time.getDate();
			time.setDate(1);
			for (let j = 1; j <= realdays; j++) {
				arr.push({
					dateNum: j,
					type: false,
					time: new Date(time.getFullYear(), time.getMonth(), j).toLocaleDateString(),
					day: new Date(time.getFullYear(), time.getMonth(), j).getDay(),
				})
			};
			let k = 1;
			// 下个月
			while (arr.length < 42) {
				arr.push({
					dateNum: k,
					notCurrent: true,
					type: false,
					time: new Date(time.getFullYear(), time.getMonth() + 1, k).toLocaleDateString(),
					day: new Date(time.getFullYear(), time.getMonth() + 1, k).getDay(),
				});
				k++;
			};
			this.days = arr;
			this.getCurrentDate()
		},
		getCurrentDate() {
			this.days.forEach(function(v, i) {
				if (v.time === new Date().toLocaleDateString()) {
					v.curr = true
				}
				if (v.time === new Date(this.onlineData.extra.date).toLocaleDateString()) {
					v.next = true
				}
			}, this);
		},
		mergeData() {
			let flag = 0
			const len = this.onlineData.signRecordList.length
			const daysLen = this.days.length
			for (let i = 0; i < len; i++) {
				if (new Date(this.onlineData.signRecordList[i].date).toLocaleDateString() === this.days[0].time) {
					flag = i
					break;
				}
			}
			while (flag--) {
				this.onlineData.signRecordList.splice(flag, 1)
			}
			for (let i = 0; i < daysLen; i++) {
				this.days[i].type = this.onlineData.signRecordList[i].type
			}
		},
		addYear(num) {
			this.current.setFullYear(this.current.getFullYear() + num);
			this.current = new Date(this.current);
		},
		addMonth(num) {
			this.current.setMonth(this.current.getMonth() + num);
			this.current = new Date(this.current);
			const str = this.current.getFullYear() + '-' + (this.current.getMonth() + 1)
			api.getMonthData({ date: str }).then(res => {
				this.onlineData = res.data
				this.mergeData()
			})
		}
	}
}
</script>
<style lang="less">
.calendar {
	font-size: 0.3rem;
	padding: 15px 0;
}

.year {
	font-size: 0.32rem;
	padding: 0 15px;
	color: #5e5e66;
	.yl-qian-left,
	.center,
	.yl-qian-right {
		padding: 5px;
	}
}

.week {
	padding: 0.3rem 0.3rem 0.2rem 0.3rem;
	color: #74747e;
	border-bottom: 1px solid #eaeaed;
	div {
		flex: 1;
	}
}

.day {
	text-align: center;
	padding: 0 15px;
	font-family: Arial, sans-serif;
}

.next {
	position: absolute;
	top: -15px;
	left: 50%;
	transform: translateX(-50%);
	width: 20px;
	height: 23px;
	background: url('../../assets/qian-gift.png') no-repeat;
	background-size: cover;
	z-index: 1;
}

.calendar-row {
	margin-top: 6px;
}

.calendar-col {
	position: relative;
	flex: 1;
	color: #8d8d99;
	span {
		display: inline-block;
		width: 30px;
		height: 30px;
		line-height: 32px;
		border-radius: 50%;
	}
	&.on {
		span {
			background-color: #FFE4E1;
		}
	}
	&.active {
		span {
			color: #fff;
			background-color: #FA7968;
		}
	}
}

.not-current {
	color: #D1D1D6;
}
</style>
